{% extends 'base.html' %}
{% load static %}

{% block title %}
    良言|首页
{% endblock %}


{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    <script src="//cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
    <div class="info-header">
        <div class="container">
            <h1 class="info-content" id="info_header_h1">良言</h1>
            <h3>黄良的人个博客</h3>
        </div>
    </div>
     <!-- 图表容器 DOM -->
    <div id="container"></div>

    <div id="hot-info" class="container">
        <div class="row">
            <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                <div class="panel hot-blog">
                    <div class="panel-heading">今日热门博客</div>
                    <div class="panel-body">
                        <ul>
                            {% for hot_detail in today_hot_details %}
                                <li class="text-center"><a href="{% url 'blog_detail' hot_detail.content_object.pk %}">
                                    {{ hot_detail.content_object.title }}</a>
                                    ({{ hot_detail.read_num }}) 
                                </li>
                            {% empty %}
                                <li class="text-center">暂无热门</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                <div class="panel hot-blog">
                    <div class="panel-heading">昨日热门博客</div>
                    <div class="panel-body">
                        <ul>
                            {% for hot_detail in yesterday_hot_details %}
                                <li class="text-center"><a href="{% url 'blog_detail' hot_detail.content_object.pk %}">
                                    {{ hot_detail.content_object.title }}</a>
                                    ({{ hot_detail.read_num }}) 
                                </li>
                            {% empty %}
                                <li class="text-center">暂无热门</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
                <div class="panel hot-blog">
                    <div class="panel-heading">七天热门博客</div>
                    <div class="panel-body">
                        <ul>
                            {% for detail in past_7_hot_detail %}
                                <li class="text-center"><a href="{% url 'blog_detail' detail.pk %}">{{ detail.title }}</a>
                                    ({{ detail.read_num_sum }}) 
                                </li>
                            {% empty %}
                                <li class="text-center">暂无热门</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 highcharts.js -->
    <script>
        var options = {
            chart: { type: 'line' },
            title: { text: null },
            xAxis: {
                categories: {{ dates|safe }},   // x 轴分类
                tickmarkPlacement: 'on',
                title : {text : "前7日阅读量"},
            },
            yAxis: {
                title: { text: null },
                labels:{ enabled: false },
                gridLineDashStyle:'Dash',
            },
            series: [{                              // 数据列
                name: '访问量',                        // 数据列名
                data: {{ read_sums }},                     // 数据
                color: '#50b432'
            }],
            legend:{ enabled:false },
            credits:{ enabled:false },
            plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
                }
            }
        };
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}